<!DOCTYPE html>
<html style = "width:100%;height:100%;"lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="Expires" content="0"/>
	<title>Dr. Oetker Canada Data Collection Mockup</title>

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery.layout-latest.min.js"></script>

	<script src="apihelp.js"></script>

	<style>
		body{
			font-family:monospace;
			font-size:12px;
		}
		.left{
			float:left;
			overflow-y:hidden;
			overflow-y:scroll;
		}
		.center{
			float:left;
		}
		textarea{
			overflow-y: scroll;
			font-family:monospace;
			font-size:12px;
			width:98%;
			height:98%;
			resize: none;

		}
		.control{
			float:left;
			cursor: pointer;
			color: blue;
		}
	</style>


</head>

<body>
	<div class = "left">
		First number indicate selected screen <br>
		Second number indicates selected tab <br>
		Thirth number indicates control number <br><br>
		LEGEND: <br>
		 API : Description <br><br>

		 <div class = "control">General</div>	 : General Notes	<br>
		 <div class = "control">TimeFilter</div> : Time Filter Control	<br><br>
		
		 <div class = "control">000</div> : Logon Screen	<br><br>
		
		 <div class = "control">100</div> : Mixer Edit Table with Time Period Selector <br>
		 <div class = "control">101</div> : Mixer Edit Totals Form <br>
		 <div class = "control">102</div> : Mixer Edit Picking table <br>
		 <div class = "control">103</div> : Mixer Edit Mixer Table <br>
		 <div class = "control">110</div> : Mixer Daily Table with Time Period Selector <br>
		 <div class = "control">111</div> : Mixer Daily Report Control <br>
		 <div class = "control">120</div> : Mixer MaterialTimesReport Report Control with Time Period Selector <br>
		 <div class = "control">130</div> : Mixer OverheadReport Report Control with Time Period Selector <br>
		 <div class = "control">140</div> : Mixer Recipes and Destination Table <br><br>
		
		 <div class = "control">200</div> : Packaging Overview Table with Time Period Selector <br>
		 <div class = "control">202</div> : Packaging Overview Form <br>
		 <div class = "control">210</div> : Packaging Daily Report Control with Time Period Selector <br>
		 <div class = "control">220</div> : Packaging Output Report Control with Time Period Selector <br>
		 <div class = "control">230</div> : Packaging Statistics Report Control with Time Period Selector <br>
		 <div class = "control">240</div> : Packaging Changeovers Report Control with Time Period Selector <br>
		 <div class = "control">250</div> : Packaging Material Table <br>
		 <div class = "control">251</div> : Packaging Material Form <br>
		 <div class = "control">260</div> : Packaging EditChangeovers Table with Time Period Selector <br>
		 <div class = "control">270</div> : Packaging Settings Speed Exceptions Table <br>
		 <div class = "control">271</div> : Packaging Settings Units Table <br>
		 <div class = "control">272</div> : Packaging Settings Line Default Speed Table <br>
		 <div class = "control">273</div> : Packaging Settings Line Mixing Costs Table <br>
		 <div class = "control">280</div> : Packaging Downtime Report Control with Time Period Selector <br><br>
		
		 <div class = "control">300</div> : Silos Level Table with Time Period Selector <br>
		 <div class = "control">310</div> : Silos Reports Report Control with Time Period Selector <br><br>
		
		 <div class = "control">400</div> : Activities LiveData Silos Lines Mixers<br>
		 <div class = "control">410</div> : Activities MixerHistory Gantogram with Time Period Selector<br>
		 <div class = "control">420</div> : Activities PackagingLinesHistory Gantogram with Time Period Selector<br>
		 <div class = "control">430</div> : Activities Alarms Table with Time Period Selector<br>
		 <br><br>
		
		 <div class = "control">500</div> : Events Overview Table with Time Period Selector<br><br>
		
		 <div class = "control">600</div> : Settings Holidays Fixed Dates Table<br>
		 <div class = "control">601</div> : Settings Holidays Costume Dates Table<br>
		 <div class = "control">610</div> : Settings Users Users Table<br>
		 <div class = "control">611</div> : Settings Users Group Table<br>
		 <div class = "control">620</div> : Settings GroupRight Control Access Table<br>
		 <div class = "control">630</div> : Settings SystemParametars Table<br>
		 <div class = "control">640</div> : Settings ProductionUsers Table<br>
		
	</div>
	<div class = "center">
		<div class = "inner-top" >		
			<input tabindex="1" id = "request" type="text" name="request" value = ""></input>
			<button id = "requestButton">Submit request</button>
		</div>
		<div class = "inner-center">
			<textarea tabindex="2" id="helpText"></textarea>
		</div>
	</div>
	
	<script>
	$("body").layout({ 
			    west__paneSelector: 	".left" 
	        ,	center__paneSelector:  	".center" 
	        ,	west__size: 			600
        });
	$(".center").layout({ 
			    north__paneSelector: 	".inner-top" 
	        ,	center__paneSelector:  	".inner-center" 
        });
	</script>

</body>
</html>